<template>
  <div class="body-box">
    <RouterLink class="nav" v-for="item in data" :key="item.id" :to="item.path">
      <img v-if="item.bool" :src="item.img" alt="">
      <img v-if="!item.bool" :src="item.activeimg" alt="">
      <p>{{ item.text }}</p>
    </RouterLink>
  </div>
</template>
<script setup lang="ts">
const requreImg = (img: string | URL) => {
  return new URL(img, import.meta.url).href;
};
const data = [
  {
    id: 1,
    path: "/",
    img: requreImg('../assets/images/zhineng.jpg'),
    activeimg:requreImg('../assets/images/zhineng-active.jpg'),
    bool:true,
    text:'智能检测'
  },
  {
    id: 2,
    path: "/shop",
    img: requreImg('../assets/images/employment.jpg'),
    activeimg:requreImg('../assets/images/employment-active.jpg'),
    bool:true,
    text:'就业姿态'
  },
  {
    id: 3,
    path: "/details",
    img: requreImg('../assets/images/security.jpg'),
    activeimg:requreImg('../assets/images/security-active.jpg'),
    bool:true,
    text:'安防管理'
  },
  {
    id: 4,
    path: "/mine",
    img: requreImg('../assets/images/equipment.jpg'),
    activeimg:requreImg('../assets/images/equipment-active.jpg'),
    bool:true,
    text:'运营设备'
  }
];
import { useRoute, RouterLink } from "vue-router";
const { path } = useRoute();
let bom = data.find(item => item.path === path)
if(bom){
  bom.bool = false
}
</script>
<style scoped>
.body-box{
  color: #fff;
  display: flex;
  margin-left: 140px;
  margin-top: 20px;
}
.body-box img{
  width: 30px;
  height: 30px;
  margin-left: 15px;
}
.nav{
  
}

</style>
